<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>demo1</title>
        <style>
            body {
                margin: 0;
                width: 100%;
                height: 100%;
            }

            .content {
                position: relative;
                width: 100vw;
                height: 100vh;
                background-color: gray;
            }

            .box1 {
                position: absolute; 
                top: 0px;
                left: 0px;
                background-color: aquamarine;
                width: 30px;
                height: 30px;
                text-align: center;
            }

            .btn {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: cornflowerblue;
                color: white;
                padding: 5px 10px;
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <div class="content">
            <div class="box1" id="box1">一</div>
            <button class="btn" id="btn">开始</button>
        </div>
    </body>

    <script>
        const box1 = document.getElementById('box1')
        const btn = document.getElementById('btn')

        function startAnimation() {
            box1.style.left = '0px'
            box1.style.top = '0px'
            function callbackFn() {
                let box1Left = parseInt(box1.style.left)
                let box1Top = parseInt(box1.style.top)
                if (box1Left < 250 && box1Top < 250) {
                    box1.style.left = `${box1Left + 1}px`
                    box1.style.top = `${box1Top + 1}px`
                    requestAnimationFrame(callbackFn)
                }
            }
            requestAnimationFrame(callbackFn)
        }

        btn.addEventListener('click', () => {
            startAnimation()
        })
    </script>
</html>